<%@ page language="java" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<c:set var="path" value="${pageContext.request.contextPath}" />
<!DOCTYPE html>
<html>
<head>
<base href="${path}/">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>个人博客后台管理</title>
<link rel="stylesheet" href="layui/css/layui.css">
<script type="text/javascript" src="js/jquery.min.js"></script>
</head>
<body>
	
<div class="layui-fluid">

	<div class="layui-card-body">
		<div class="layui-btn-group">
			<button class="layui-btn layui-btn-normal toolbar" data-type="add"><i class="layui-icon layui-icon-add-1"></i> 添加</button>
			<button class="layui-btn layui-btn-danger toolbar" data-type="batchdel"><i class="layui-icon layui-icon-delete"></i> 删除</button>
		</div>
		
		<table id="lay-table" lay-filter="lay-table"></table>
		
	</div >

	
	
</div>
	
<!-- 自定义模板 -->
<script type="text/html" id="tr-opts">
   	<a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="edit"><i class="layui-icon layui-icon-edit"></i>编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del"><i class="layui-icon layui-icon-delete"></i>删除</a>
</script>
 <script type="text/html" id="sorts">
	{{# if(d.sort_va>=4) { }}
		<input type="checkbox" value="4" lay-filter="top" name="top" title="置顶" checked >
	{{#  d.sort_va-=4; }}
	{{#  }else{  }}
		<input type="checkbox" value="4" lay-filter="top" name="top" title="置顶" >
	{{#   } }}
	{{# if(d.sort_va>=2) {  }}
		<input type="checkbox" value="2" lay-filter="top" name="good" title="精华" checked>
	{{#  d.sort_va-=2; }}
	{{# }else { }}
		<input type="checkbox" value="2" lay-filter="top" name="good" title="精华" >
	{{#  } }}
	{{# if(d.sort_va==1){  }}
	<input type="checkbox"lay-filter="top" value="1"  name="top" title="转载" checked>

	{{# }else { }}
		<input type="checkbox" value="1" lay-filter="top" name="other" title="转载" >
	{{#  } }}
</script> 	
<script src="layui/layui.js"></script>
<script>
layui.use(['table', 'layer','form'], function() {
	var table = layui.table;
	var layer = layui.layer;
	var $ = layui.$;
	var form=layui.form;
	$('input[name="good"]').prop("checked",true); 
	$('body').on('click', '.btn-del', function(){
		  console.log($(this));
		});
	//表格渲染
	table.render({
	    elem: '#lay-table',
	    height: 'full-80',
	    method: 'post',
	    url: '${path}/action/article/talist',		//ajax请求
	   	page: true,
	   	even: true,
	    cols: [[ //表头
	    	{checkbox: true},
	    	{title:'#', type:'numbers', align:'center', width:40},
	      	{field: 'article_id', title: '文章id', align:'center', hide:true},
	      	{field: 'article_title', title: '文章标题', align:'center', width:180},
	      	{field: 'article_remark_content', title: '文章摘要', align:'center'},
	      	{field: 'sort_va',title: '文章分类', align:'center',templet:'#sorts'},
	    	{field: 'article_date', title: '发布时间', align:'center', sort:true},
	      	{title: '操作', fixed: 'right', width: 160, align: 'center', toolbar: '#tr-opts'}
	    ]],
	    limits: [15, 30, 50, 100, 200], 
		limit: 15,
		loading: true,
		autoSort: false
	  });

	// 表格行的工具栏
    table.on('tool(lay-table)', function(obj) {
        var data = obj.data;
        if(obj.event === 'del') {
            layer.confirm('您确定要删除行吗？', function(index) {
            	// jquery的ajax， $.getJSON(), $.post(), $.ajax()
            	$.ajax({
            		type: 'post',
    				url: '${path}/action/article/del',
    				data: {
    					id: data.article_id
    				},
    				success: function(json) {
    					
              			layer.msg('删除成功！');	
    					table.reload('lay-table');
    				}        				
    			});
            })
        } else if(obj.event === 'edit') {
        	layer.open({
          		type: 2,  //打开一个iframe
          		title: '编辑文章',
          		content: '${path}/action/article/getone?id=' + data.article_id,
          		maxmin: true,
          		area: ['800px', '400px'],
          		btn: ['确定', '取消'],
          		yes: function(index, layero){
            		//点击确认触发 iframe 内容中的按钮提交
            		var submit = layero.find('iframe').contents().find("#lay-form-submit");
            		submit.click();
          		}
        	}); 
        }
    });

  	//监听排序事件 
    table.on('sort(lay-table)', function(obj) {
    	table.reload('lay-table', {
    		initSort: obj,
    		where: {
    			orderBy: obj.field,
    			orderDir: obj.type
    		}  		
    	});
    });
  	/*监听自定义多选*/
    form.on('checkbox(top)', function(data){
    	  console.log(data.elem); //得到checkbox原始DOM对象
			//alert($(this).parent().parent().parent().find('[data-field="article_id"]').find('div').html())
			console.log(data.elem.checked);
    	  $.ajax({
    		  url:'${path}/action/article/changeSort',
    		  type:'post',
    		  data:{
    			  id:$(this).parent().parent().parent().find('[data-field="article_id"]').find('div').html(),
    			  open:data.elem.checked,
    			  sort_va:data.value
    		  },
    		  success:function(json) {
					table.reload('lay-table');
          			layer.msg('已更新分类');	
				}        	
    		  
    		  
    	  });
    });   
  	
    table.on('checkbox(test)', function(obj){
    	  console.log(obj.checked); //当前是否选中状态
    	  console.log(obj.data); //选中行的相关数据
    	  console.log(obj.type); //如果触发的是全选，则为：all，如果触发的是单选，则为：one
    	});
 	// toolbar工具栏
	var active = {
  		batchdel: function() {
    		var checkData = table.checkStatus('lay-table').data; //得到选中的数据
    		if(checkData.length === 0) {
    			layer.msg('请选择数据');
      			return false;
    		}
    			
    		var idArr = [];
    		for(var i=0; i<checkData.length; i++) {
    			idArr.push(checkData[i].article_id);
    		}
    		alert(idArr);
    		layer.confirm('确定删除吗？', function(index) {
    			$.ajax({
    				type: 'post',
    				url: '${path}/action/article/multiDel',
    				data: {
    					ids: idArr.join(',')
    				},
    				success: function(json) {
    					table.reload('lay-table');
              			layer.msg('已删除');	
    				}        				
    			});          			
    		});
  		},
      	add: function() {
        	layer.open({
          		type: 2,
          		title: '增加文章',
          		content: '${path}/admin/article_form.jsp',
          		maxmin: true,
          		area: ['800px', '400px'],
          		btn: ['确定', '取消'],
          		yes: function(index, layero){
            		//点击确认触发 iframe 内容中的按钮提交
            		var submit = layero.find('iframe').contents().find("#lay-form-submit");
            		submit.click();
          		}
        	}); 
  		}
 	};
	
    $('.toolbar').on('click', function(){
  		var type = $(this).data('type');
  		active[type] ? active[type].call(this) : '';
	});
		
});

</script>

</body>
</html>